<template>
	<view>
		<u-popup :show="show" :round="10" @close="close">
			<view class="popupTitle" v-if="type=='search'">
				<u-search :focus="focus" placeholder="请输入关键字" v-model="searchKey" style="margin: 10rpx 0;"
					@search='search' @clear="clear" @custom='search' actionText="搜索"></u-search>
				<view style="margin: 0 10rpx;">
					|
				</view>
				<view @click="type='add'" style="font-size: 26rpx;">
					生成账户
				</view>
			</view>
			<view class="popupBody" :style="{height:type=='search'?'50vh':'25vh'}">
				<z-paging :style="{display:type=='search'?'block':'none'}" ref="paging" style="height: 100%;"
					:fixed="false" v-model="data" :hide-empty-view='true' @query="query" :default-page-no="1" :default-page-size="10">
					<template v-if="loading">
						<view class="userInfoBox" v-for="item in 20" :key="item">
							<view style="height: 100rpx;width: 100rpx;border-radius: 8rpx;" class="Skeleton" />
							<view class="userContent">
								<view style="height: 30rpx;" class="Skeleton" />
								<view style="height: 30rpx;" class="Skeleton" />
							</view>
						</view>

					</template>
					<template v-else>

				
						<view class="viewWidth">
							<u-checkbox-group v-model="checkboxValue1" placement="column">
								<view v-for="(item, index) in data" :key="index" class="userInfoBox "
									@click.stop="selectUser(item.relative_id)"><u-checkbox :name="item.relative_id" />
									<view style="margin-left: 10rpx;">
										<u--image :fade='false' :src="item.avatar" width="100rpx" height="100rpx"
											radius='8rpx'></u--image>
									</view>
									<view class="userContent">
										<view>
											<u-text :lines='1' size='24rpx' :text='item.nick_name'></u-text>
										</view>
										<view>
											备注:{{item.remark_name?item.remark_name:'暂无备注'}}
										</view>
									</view>
								</view>
							</u-checkbox-group>
						</view>
						<view v-if="!data.length">
							<empty />
							<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
								邀请亲属
							</button>
						</view>
					</template>
				</z-paging>
				<view v-if="type!='search'" class="userAddBox">
					<view class="userAvatar">
						<view class="upload" v-if="uploadDisabled">
							<u-loading-icon vertical textSize='30rpx' text='上传中...' size='100rpx' textColor='#fff'
								color='#fff'></u-loading-icon>
						</view>
						<u-avatar mode='aspectFill' :src="avatar" size='200rpx' @click="upload"></u-avatar>
					</view>
					<view class="viewWidth">
						<u-input v-model="nick_name" placeholder='请输入用户名' />
					</view>
				</view>
			</view>
			<view style="margin-top: 10rpx;padding: 0 40rpx;" v-if="type=='search'">
				<u-button :disabled='disabled' @click='checkUserBinding' color="#3975c6" v-if="checkboxValue1.length">
					确认
				</u-button>
				<u-button :disabled='disabled' @click='checkUserBinding' v-else>
					确认
				</u-button>
			</view>
			<view class="viewWidth " v-else style="display: flex;align-items: center;">
				<u-button :disabled='disabled||uploadDisabled' @click='type="search"'>
					取消
				</u-button>
				<u-button :disabled='disabled||uploadDisabled' @click='addUser' color="#3975c6">
					确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['show', 'family_id'],
		data() {
			return {
				uploadDisabled: false,
				nick_name: null,
				avatar: null,
				type: 'search',
				disabled: false,
				exclude_ids: uni.getStorageSync('exclude_ids'),
				focus: false,
				searchKey: '',
				data: [],
				loading: true,
				checkboxValue1: []
			}
		},
		methods: {
			upload() {
				if (this.uploadDisabled) return
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.avatar = res.tempFilePaths[0]
						this.uploadDisabled = true
						uni.uploadFile({
							url: this.$config.url + '/api/image/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'Content-Type': 'application/json;charset=UTF-8',
								'Authorization': "Bearer " + uni.getStorageSync('token')
							},
							success: (res) => {
								this.avatar = JSON.parse(res.data).data.data.urlMedium
								this.uploadDisabled = false
							},
							fail: (err) => {
								this.uploadDisabled = false
							}
						});
					},
					fail: () => {

						this.uploadDisabled = false
					}
				})
			},
			addUser() {
				if(!this.nick_name){
					uni.$u.toast('请输入用户名')
					return
				}
				if(!this.avatar){
					uni.$u.toast('请上传头像')
					return
				}
				this.disabled = true
				uni.showLoading({
					title: '添加中...'
				})
				this.$api.My.Family.Member.AddUser(this.family_id, {
					nick_name: this.nick_name,
					avatar:this.avatar
				}).then(res => {
					uni.hideLoading()
					this.disabled = false
					this.close()
					this.$emit('reload')
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
					this.disabled = false
				})
			},
			selectUser(id) {
				if (this.checkboxValue1.includes(id)) {
					this.checkboxValue1 = this.checkboxValue1.filter(item => item != id)
				} else {
					this.checkboxValue1.push(id)
				}
			},
			close() {
				if(this.uploadDisabled)return
				if (this.disabled) return
				this.$emit('close')
			},
			search() {
				this.$refs.paging.reload()
				this.radiovalue = null
			},
			clear() {
				this.focus = false
				setTimeout(() => {
					this.focus = true
				}, 100)
			},
			query(page, size) {
				let obj = {
					page,
					size,
					keywords: this.searchKey,
					exclude_ids: this.exclude_ids
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Relative.List(obj).then(res => {
					this.$refs.paging.complete(res.data.relatives.data.map(item => {
						return {
							...item,
							avatar: item.relative.avatar,
							nick_name: item.relative.nick_name,
						}
					}))
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
				})

			},

			checkUserBinding() {
				if(!this.checkboxValue1.length)return
				this.disabled = true
				uni.showLoading({
					title: '添加中...'
				})
				this.$api.My.Family.Member.Add(this.family_id, {
					user_ids: this.checkboxValue1
				}).then(res => {
					uni.hideLoading()
					this.disabled = false
					this.close()
					this.$emit('reload')
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
					this.disabled = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfoBox {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		width: 100%;

		.userContent {
			margin-left: 10px;
			flex: 1;
			display: flex;
			height: 100rpx;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 1rpx solid #f1f1f1;
			padding: 0 0 10rpx 0;
		}
	}

	.shareBtn {
		width: 30vw;
		margin: 40rpx auto;
		border-radius: 100rpx;
		font-size: 24rpx;
		border: 1rpx solid #bbb;
	}

	.userAddBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}

	.userAvatar {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		overflow: hidden;

		.upload {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>